import React, { Component } from 'react'

class ControllerForm extends Component {
  state = {
    userName: '张三',
    userAge: '19'
  }

  handleInpChange = (e) => {
    let name = e.target.name
    let value = e.target.type === 'checkbox' ? e.target.checkbox : e.target.value
    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <div>
        <form action="">
          <input type="text" name="userName" value={this.state.userName} onChange={this.handleInpChange} />
          <input type="text" name="userAge" value={this.state.userAge} onChange={this.handleInpChange} />
        </form>
        <div>my name is {this.state.userName},my age is {this.state.userAge}</div>
      </div>
    )
  }
}

export default ControllerForm